<ion-app [ngClass]="{'dark-theme': (theme$ | async), 'camera': isCameraStart}">
  <ion-menu side="start" type="push" menuId="camera" contentId="main" class="camera-menu" disabled
    (ionWillOpen)="onOpenCameraMenu($event)" (ionDidClose)="onCloseCameraMenu($event)">
    <ion-content (click)="getCameraFocusCoordinates($event)">
      <div class="loader-6 center"
        [ngStyle]="{'left': cameraFocusPosition.left + 'px', 'top': cameraFocusPosition.top + 'px'}"
        *ngIf="cameraFocusPosition.show">
        <span></span>
      </div>
      <ion-toolbar style="--background: transparent;">
        <ion-buttons slot="start">
          <ion-button>
            <ion-icon size="large" slot="icon-only" name="cog-outline"></ion-icon>
          </ion-button>
        </ion-buttons>

        <ion-buttons slot="end">
          <ion-button (click)="closeCameraSide($event)">
            <ion-icon size="large" slot="icon-only" name="chevron-forward-outline"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>

      <ion-row class="camera-control">
        <ion-col size="12" class="controls">
          <ion-button fill="clear" [disabled]="isCameraFront" (click)="switchFlashMode($event)">
            <ion-icon slot="icon-only" [name]="isCameraFlashMode ? 'flash-off-outline' : 'flash-outline'"></ion-icon>
          </ion-button>
          <ion-fab-button class="shoot-control" (click)="takePicture($event)">
            <div class="circle"></div>
          </ion-fab-button>
          <ion-button fill="clear" (click)="switchCamera($event)">
            <ion-icon slot="icon-only" name="sync-outline"></ion-icon>
          </ion-button>
        </ion-col>
        <!--<ion-col size="12">
          <ion-segment mode="ios" style="max-width: 320px;margin: auto;" (ionChange)="segmentChanged($event)">
            <ion-segment-button>
              <ion-label>Qr scanner</ion-label>
            </ion-segment-button>
            <ion-segment-button>
              <ion-label>Live</ion-label>
            </ion-segment-button>
            <ion-segment-button>
              <ion-label>Story</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-col>-->
      </ion-row>
    </ion-content>
  </ion-menu>

  <ion-menu side="end" type="push" menuId="profile" contentId="main" class="profile-menu" disabled>
    <ion-header class="ion-no-border">
      <ion-toolbar>
        <ion-title>John Smith</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list lines="none">
        <ion-item button>
          <ion-icon color="primary" slot="start" name="bookmarks-outline"></ion-icon>
          <ion-label>Bookmarks</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>

    <ion-footer>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-button (click)="goToSettings()">
            <ion-icon color="primary" slot="icon-only" size="large" name="cog-outline"></ion-icon>
          </ion-button>
        </ion-buttons>

        <ion-title>{{'settings_title' | translate}}</ion-title>

        <ion-buttons slot="end">
          <ion-button (click)="toggleDarkTheme()">
            <ion-icon color="primary" slot="icon-only" name="moon-outline"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-footer>
  </ion-menu>

  <ion-router-outlet id="main"></ion-router-outlet>
</ion-app>